<template>
    <SysDrawer :title="drawer.title" :visible="drawer.visible" :size="drawer.size" @onClose="onCloseDrawer">
        <template v-slot:content>
            <el-descriptions title="管理员日志" :column="1" border>
                <el-descriptions-item label="ID">{{ recordContent.id }}</el-descriptions-item>
                <el-descriptions-item label="类型">{{ recordContent.group_name }}</el-descriptions-item>
                <el-descriptions-item label="管理员ID">{{ recordContent.admin }}</el-descriptions-item>
                <el-descriptions-item label="详情">{{ recordContent.detail }}</el-descriptions-item>
            </el-descriptions>
        </template>
    </SysDrawer>
</template>

<script setup lang='ts'>
import SysDrawer from '@/components/SysDrawer.vue'
import useDrawer from '@/hooks/useDrawer'
import { ref } from 'vue';

const { drawer, onShowDrawer, onCloseDrawer } = useDrawer()

const recordContent = ref()
// 显示弹窗
const onShow = (title: string, content: any) => {
    drawer.title = title
    drawer.size = '50%'
    recordContent.value = content
    onShowDrawer()
}

// 暴露法方给父组件
defineExpose({ onShow })
</script>

<style scoped lang='scss'>
.el-descriptions {
    width: 100%;

    tr {
        width: 100%;
    }
}
</style>